<!--
 * @Description: 图片上传组件
 * @Author: liyujie
 * @Date: 2021/02/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/02/07
-->
<template>
    <section class="wrapper">
        <div class="pic-view">
            <div
                class="pic-item"
                v-if="img"
            >
                <img :src="img">
                <div class="img-action">
                    <i
                        class="el-icon-zoom-in"
                        @click="fnShowPreview(img)"
                    />
                    <i
                        class="el-icon-delete"
                        @click="handleDeleteImage()"
                        v-if="type !== 'detail'"
                    />
                </div>
            </div>
            <slot/>
            <el-upload
                action="noAction"
                :show-file-list="false"
                :http-request="handleUploadImage"
                :before-upload="beforeUploadImage"
                accept="image/*"
                :limit="1"
                v-if="img === ''"
                :disabled="type === 'detail'"
            >
                <div class="uploader-customer pic-item">
                    <i class="el-icon-plus"/>
                    <div class="upload-text">{{ text }}</div>
                </div>
            </el-upload>
            <div
                class="tips"
                v-if="tips"
            >
                <slot
                    name="tips"
                    v-if="$slots.tips"
                />
                <span v-else>{{ tips }}</span>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview"/>
    </section>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    name: 'ImageUpload',
    props: {
        type: {
            type: String,
            default: 'add'
        },
        image: {
            type: String,
            default: ''
        },
        tips: {
            type: String,
            default: ''
        },
        limitType: {
            type: String,
            default: 'KB'
        },
        limit: {
            type: Number,
            default: 200
        },
        text: {
            type: String,
            default: '添加图片'
        }
    },
    model: {
        prop: 'image',
        event: 'change'
    },
    computed: {
        img: {
            get() {
                return this.image;
            },
            set(val) {
                this.$emit('change', val);
            }
        }
    },
    data() {
        return {};
    },
    components: {
        imgPreview,
    },
    mounted(){},
    methods:{

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt;

            if(this.limit === 0) {
                isLt = true;
            } else if(this.limitType === 'MB') {
                isLt = file.size / 1024 / 1024 < this.limit;
            } else {
                isLt = file.size / 1024 < this.limit;
            }

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt) {
                this.$notify({
                    title: '提示',
                    message: `图片大小不能超过${this.limit}${this.limitType}`,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt;
        },

        /**
         * 上传图片
         * @param e
         * @returns {boolean}
         */
        handleUploadImage(e) {
            this.uploadImage(e, (resp) => {
                this.$emit('change', resp.data.url);
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        /**
         * 上传图片
         * @param e
         * @param success
         * @param error
         */
        uploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code === 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        /**
         * 删除上传的图片
         * @param index
         */
        handleDeleteImage(index) {
            this.img = '';
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .pic-view {
        margin-top: 12px;
        .el-icon-plus {
            font-size: 24px;
        }
        .tips {
            word-wrap: break-word;
            word-break: normal;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            color: #999999;
        }
        .uploader-customer {
            width: 100px;
            height: 100px;
            background: rgba(242, 242, 242, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #999;
            padding-top: 12px;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            border: 1px dashed #aaa;
        }
        .pic-item {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius: 4px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }

            .img-action {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 100px;
                height: 100px;
                border-radius: 4px;
                background: rgba(0, 0, 0, .6);
                justify-content: center;
                align-items: center;
                display: none;

                i {
                    color: #ffffff;
                    font-size: 17px;
                    cursor: pointer;
                }

                .el-icon-delete {
                    margin-left: 17px;
                }
            }

            &:hover {
                .img-action {
                    display: flex;
                }
            }
        }
    }
}
</style>
